<template>
  <view class="work-container">
    <nav-bar :title="'解决方案'"></nav-bar>
    <view :style="marginTop">
      <u-swiper
        :list="swiperList"
        radius="0"
        :autoplay="true"
        :interval="5000"
        :easingFunction="'linear'"
        :indicator="true"
        :imgMode="'heightFix'"
        height="180px"
        @click="swiperClick"
      ></u-swiper>
      <view class="container">
        <!-- 一级标签 -->
        <uni-section title="我想要" type="line">
          <combox-search
            labelWidth="130px"
            emptyTips="无匹配选项"
            :isJSON="true"
            :keyName="keyName"
            placeholder="请输入或选择您想解决的问题"
            :candidates="issueList"
            @getValue="getValue"
            @clear="clearOne"
          ></combox-search>
        </uni-section>
        <uni-section
          title="请补充"
          type="line"
          :id="label2Open ? 'label2' : 'label2-block '"
        >
          <combox-search
            labelWidth="130px"
            emptyTips="无匹配选项"
            :isJSON="true"
            :keyName="keyName"
            placeholder="请输入或选择您想解决的问题"
            :candidates="issueList[oneLabelIndex].children"
            @getValue="getValueLabel2"
            @clear="clearTwo"
            v-if="issueList[oneLabelIndex].type === 'combox'"
          ></combox-search>
          <u-textarea
            v-model="valueLabel2"
            placeholder="请输入咨询内容"
            v-else-if="issueList[oneLabelIndex].type === 'textArea'"
          ></u-textarea>
          <u-checkbox-group
            v-model="checked"
            placement="column"
            iconPlacement="right"
            v-if="issueList[oneLabelIndex].type === 'comboxDouble'"
          >
            <u-checkbox
              activeColor="red"
              :label="item.name"
              labelSize="16px"
              borderBottom="true"
              v-for="(item, index) in issueList[oneLabelIndex].children"
            ></u-checkbox>
          </u-checkbox-group>
        </uni-section>
        <uni-section
          title="三级标签"
          type="line"
          :id="label3Open ? 'label3' : 'label3-block '"
        >
          <combox-search
            labelWidth="130px"
            emptyTips="无匹配选项"
            :isJSON="true"
            :keyName="keyName"
            placeholder="请输入或选择您想解决的问题"
            :candidates="label3List.children"
            @getValue="getValueLabel3"
            v-if="label3List.type === 'combox'"
          ></combox-search>
          <u-textarea
            v-model="valueLabel2"
            placeholder="请输入咨询内容"
            v-else-if="label3List.type === 'textArea'"
          ></u-textarea>
          <u-checkbox-group
            v-model="checked"
            placement="column"
            iconPlacement="right"
            v-if="label3List.type === 'comboxDouble'"
          >
            <u-checkbox
              activeColor="red"
              :label="item.name"
              labelSize="16px"
              borderBottom="true"
              v-for="(item, index) in label3List.children"
            ></u-checkbox>
          </u-checkbox-group>
        </uni-section>
        <uni-section
          title="补全电话信息"
          type="line"
          style="padding-bottom: 40rpx"
        >
          <u-input
            placeholder="补全电话信息"
            maxlength="11"
            type="number"
            :placeholderStyle="inputStyle"
          >
            <template slot="suffix">
              <uni-tag text="点此授权手机号" type="primary" />
            </template>
          </u-input>
        </uni-section>

        <uni-section
          title="获取解决方案"
          type="line"
          style="padding-bottom: 40rpx"
        >
          <u-button
            text="提交解决方案"
            color="linear-gradient(to right, #4ca1af, #c4e0e5)"
            shape="circle"
          ></u-button>
        </uni-section>
      </view>
    </view>
  </view>
</template>

<script>
import comboxSearch from "@/components/cuihai-combox/cuihai-combox.vue";
import NavBar from "@/components/nav-bar.vue";
export default {
  components: {
    comboxSearch,
    NavBar,
  },
  data() {
    return {
      marginTop: "",
      inputStyle: "color:grey;font-size:32rpx",
      swiperList: [
        {
          url: "/static/images/banner/banner1.png",
        },
        {
          url: "/static/images/banner/banner2.jpg",
        },
        {
          url: "/static/images/banner/banner3.png",
        },
        {
          url: "/static/images/banner/banner4.png",
        },
        {
          url: "/static/images/banner/banner5.png",
        },
      ],
      issueList: [
        {
          id: 1,
          parentId: 0,
          name: "二级单选框",
          type: "combox",
          children: [
            {
              id: 11,
              name: "三级单选框",
              type: "combox",
              children: [
                {
                  id: 111,
                  name: "咨询类别1-1",
                },
                {
                  id: 112,
                  name: "咨询类别1-2",
                },
              ],
            },
            {
              id: 12,
              name: "三级没有框",
            },
            {
              id: 12,
              name: "三级输入框",
              type: "textArea",
              children: [
                {
                  id: 3 - 1,
                },
              ],
            },
            {
              id: 3111,
              name: "三级多选框",
              type: "comboxDouble",
              children: [
                {
                  id: 4 - 1,
                  name: "多选1",
                },
                {
                  id: 4 - 2,
                  name: "多选2",
                },
                {
                  id: 4 - 3,
                  name: "多选3",
                },
                {
                  id: 4 - 4,
                  name: "多选4",
                },
                {
                  id: 4 - 5,
                  name: "多选5",
                },
                {
                  id: 4 - 6,
                  name: "多选6",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          name: "没有二级框",
        },
        {
          id: 3,
          name: "二级输入框",
          type: "textArea",
          children: [
            {
              id: 3 - 1,
            },
          ],
        },
        {
          id: 4,
          name: "二级多选框",
          type: "comboxDouble",
          children: [
            {
              id: 4 - 1,
              name: "多选1",
            },
            {
              id: 4 - 2,
              name: "多选2",
            },
            {
              id: 4 - 3,
              name: "多选3",
            },
            {
              id: 4 - 4,
              name: "多选4",
            },
            {
              id: 4 - 5,
              name: "多选5",
            },
            {
              id: 4 - 6,
              name: "多选6",
            },
          ],
        },
      ],
      label2List: [],
      label3List: [],
      keyName: "name",
      oneLabelIndex: 0,
      twoLabelIndex: 0,
      valueLabel2: "",
      label2Open: true,
      label3Open: true,
    };
  },
  created() {},
  onLoad(options) {
    const top = uni.getSystemInfoSync().statusBarHeight + 44;
    this.marginTop = "margin-top:" + top + "px";
  },
  watch: {
    model(val) {
      if (val.length > 5) {
        this.$nextTick(() => this.model.pop());
      }
    },
  },
  methods: {
    getValue(e) {
      this.oneLabelIndex = e;
      //如果在issueList中有chidren，则显示lable2
      if (this.issueList[this.oneLabelIndex].hasOwnProperty("children")) {
        this.label2List = this.issueList[this.oneLabelIndex];
        // var label2 = windows.document.getElementById("label2");
        // label2.style.display = "block";
        this.label2Open = false;
      } else {
        this.label2Open = true;
      }
      console.log("label2", this.label2List);
    },
    getValueLabel2(e) {
      this.twoLabelIndex = e;
      //如果在issueList中有chidren，则显示lable2
      if (this.issueList[this.oneLabelIndex].hasOwnProperty("children")) {
        this.label3List = this.label2List.children[this.twoLabelIndex];
        this.label3Open = false;
      } else {
        this.label3Open = true;
      }
      if (!this.label3List.hasOwnProperty("children")) {
        this.label3Open = true;
      }
      console.log(this.label3List);
    },
    getValueLabel3(e) {
      console.log(e);
    },
    clearOne() {
      this.label2Open = true;
      this.label3Open = true;
    },
    clearTwo() {
      this.label3Open = true;
    },
  },
};
</script>

<style lang="scss">
.work-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .container {
    width: 100%;
    padding-bottom: 40rpx;
    /deep/ .uni-section-content {
      display: flex;
      flex-direction: column;
      padding-left: 20rpx;
      padding-right: 20rpx;
      .uni-combox {
        width: 100%;
        border-radius: 10px;
        border: 1px solid #cdcdcd;
        padding-left: 10rpx;
      }
      /deep/ .u-input {
        height: 80rpx;
        border: 1px solid #cdcdcd !important;
        border-radius: 10px;
        .uni-input-placeholder {
          font-size: 32rpx;
        }
      }
    }
  }
}
#label2 {
  display: none;
}
#label3 {
  display: none;
}
/deep/ .u-checkbox {
  padding-bottom: 20rpx;
}
#label2-block {
  display: block;
}
#label3-block {
  display: block;
}
</style>
